<template>
  <div>
    <!-- 页面顶部面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-input v-model="info.query" placeholder="请输入内容" class="input-with-select" clearable @close="getorderlist">
            <el-button slot="append" icon="el-icon-search" @click="getorderlist" />
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="orderlist" :cell-style="cellStyles" :header-cell-style="headerStyles" border stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column label="订单编号" prop="order_number" />
        <el-table-column label="订单价格" prop="order_price" />
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status==='1'" type="success">已付款</el-tag>
            <el-tag v-else type="danger">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send" />
        <el-table-column label="下单时间" prop="create_time" />
        <el-table-column label="操作">
          <template>
            <el-button type="primary" icon="el-icon-edit" @click="editaddress" />
            <el-button type="success" icon="el-icon-location-outline" @click="showprogress" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <!-- 省市县三级联动 -->
    <el-dialog title="修改地址" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form res="orderform" :model="orderform" :rules="rules" label-width="100px">
        <el-form-item label="省市区/县" prop="address1">
          <el-cascader v-model="orderform.address1" :options="citydata" clearable @close="resetform" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="orderform.address2" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 物流 -->
    <el-dialog title="物流进度" :visible.sync="centerDialogVisible2" width="30%" center>
      <div class="radio">
        排序：
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
      </div>

      <el-timeline :reverse="reverse">
        <el-timeline-item v-for="(activity, index) in progressinfo" :key="index" :color="activity.color" :timestamp="activity.timestamp">
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import citydata from '@/utils/citydata'
export default {
  data() {
    return {
      info: {
        query: '',
        pagenum: 1,
        pagesize: 5,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      },
      orderlist: [],
      total: 10,
      pagenum: 1,
      orderform: {
        address1: [],
        address2: ''
      },
      rules: {
        address1: [
          { required: true, message: '请选择省市县/区', trigger: 'blur' }
        ],
        address2: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      centerDialogVisible: false,
      centerDialogVisible2: false,
      citydata: citydata,
      reverse: true,
      progressinfo: [{
        content: '创建订单',
        timestamp: '2018-04-15',
        color: '#108ee9'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13',
        color: '#108ee9'
      }, {
        content: '付款成功',
        timestamp: '2018-04-11'
      }]
    }
  },
  created() {
    this.getorderlist()
  },
  methods: {
    headerStyles({ row, column }) {
      return 'text-align:center'
    },
    cellStyles({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
    async getorderlist() {
      const { data: res } = await this.$http.get('/orders', { params: this.info })
      if (res.meta.status !== 200) {
        return this.$message.error('获取失败')
      }
      this.orderlist = res.data.goods
      this.total = res.data.total
      console.log(this.orderlist)
      this.$message.success('获取成功')
    },
    handleSizeChange(val) {
      this.info.pagesize = val
      this.getorderlist()
    },
    handleCurrentChange(val) {
      this.info.pagenum = val
      this.getorderlist()
    },
    editaddress() {
      this.centerDialogVisible = true
    },
    resetform() {
      this.$refs.orderform.resetFileds()
    },
    async showprogress() {
      this.centerDialogVisible2 = true
      // const { data: res } = await this.$http.get('/kuaidi/804909574412544580')
      // console.log(res.data)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('获取物流失败')
      // }
      // this.progressinfo = res.data
      // this.centerDialogVisible2 = true
      // this.$message.success('获取物流成功')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
.el-timeline {
  margin-top: 20px;
}
</style>
